<template>
	<view class="container">
			<view class="search">
					<input type="text"  placeholder="请输入关键字" v-model="searchWord" class="search-input"  />
					<image src="/static/image/Index/search-icon.png" mode="" class="search_icon"></image>
					<image src="/static/image/Index/search-clear.png" mode="" @click="handClearWork" class="search_clear" v-if="searchWord!=''" ></image>
					<view style="font-size: 30rpx;margin-left:30rpx;">搜索</view>
			</view>
			<view class="search-history" v-if="showHistory">
					<view class="historytxt">
						 <view style="font-size: 32rpx;">搜索历史</view>
						 <image src="/static/image/Index/search-del.png" mode="" @click="deleteHistory" class="del"></image>
					</view>
					<view class="historylist">
							<view class="listitem">是宝贝啊</view>
							<view class="listitem">是发给宝贝啊</view>
							<view class="listitem">爱偷懒的橘猫</view>
							<view class="listitem">一直睡不醒的大侠</view>
					</view>
			</view>
			<!-- 有数据 -->
			<view class="content_List" v-if="!showNo">
						<view class="msg-top-liaolist">
								<view class="msgtop-list">
										<view class="msglist_item-list">
												<image src="/static/image/message/message-qunliaoicon.png" class="sysimg" mode=""></image>
												<view class="smg-info">
													<view>
													  <view class="smginfotitle">群聊AAA群</view>
												  	<view class="smgcontent">群聊的消息消息</view>
													</view>
														<view class="msg-time">昨天</view>
												</view>												
										</view>									
										<view class="msglist_item-list">
												<image src="/static/image/message/message-danliaoicon.png" class="sysimg" mode=""></image>
												<view class="smg-info">
													 <view>
													  <view class="smginfotitle">大少爷</view>
												  	<view class="smgcontent">吃饭了没</view>
													</view>
														<view class="msg-time">15:30</view>
												</view>
										</view>									
										<view class="msglist_item-list">
												<image src="/static/image/message/message-qunliaoicon.png" class="sysimg" mode=""></image>
												<view class="smg-info">
													<view>
													  <view class="smginfotitle">群聊AAA群</view>
												  	<view class="smgcontent">群聊的消息消息</view>
													</view>
														<view class="msg-time">昨天</view>
												</view>										
										</view>						
										<view class="msglist_item-list">
												<image src="/static/image/message/message-danliaoicon.png" class="sysimg" mode=""></image>
												<view class="smg-info">
													 <view>
													  <view class="smginfotitle">大少爷</view>
												  	<view class="smgcontent">吃饭了没</view>
													</view>
														<view class="msg-time">15:30</view>
												</view>
										</view>
								</view>
									<view class="normaltxt"> 没有更多了~ </view>
						</view>					
		  </view>
			<!-- 无数据 -->
			<view class="nodata" v-if="showNo">
					<image src="/static/image/Index/search-nodata.png" mode="" class="noimg"></image>
					<view class="notext">暂无历搜索记录哦 ~	</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchWord:'',
				showNo:false,
				showHistory:true,		
			};
		},
	
		onLoad(){
			
		},
		methods: {
		  handClearWork(){
			  this.searchWord = ''
	  	},	
			deleteHistory(){
					uni.showModal({
						title:'提示',
						content:'是否确认删除历史记录？',
						confirmColor:"#000000",
						cancelColor:"#999999",
						success:(res)=>{
							if(res.confirm){
							
							}
						}
					})	
			},		 
		}
	};
</script>

<style lang="scss" scoped>
	page{
		background: #fff;
	}
	.container{
		 .search{
			 display: flex;
			 align-items: center;
			 padding:0 30rpx
		 }
		 .search-input{
			 position: relative;
			 font-size: 28rpx;
			 padding-left:74rpx;
			 width: 600rpx;
			 height: 78rpx;
			 background: #F8F8F8;
			 border-radius: 40rpx;
		 }
		 .search_icon{
			 width:28rpx;
			 height:27rpx;
			 position: absolute;
			 left:60rpx;
		 }
		 .search_clear{
			 width:30rpx;
			 height:30rpx;
			 position: absolute;
			 right:150rpx;
		 }
		 .search-history{
			 padding:0 30rpx;
			 margin-top:30rpx;
		 }
		 .historytxt{
			 display: flex;
			 align-items: center;
			 justify-content: space-between;
		 }
		 .del{
			 width:34rpx;
			 height:32rpx;
		 }
		 .historylist{
			 margin-top:30rpx;
			 display: flex;
			 align-items: center;
			 flex-wrap: wrap;
		 }
		 .listitem{		
			 height: 60rpx;
			 background: #F8F8F8;
			 border-radius: 8rpx;
			 font-size: 24rpx;
			 text-align: center;
		   color: #666666;
			 line-height: 60rpx;
		   margin-right:24rpx;
			 margin-bottom:24rpx;
		   padding:0 24rpx;
		 }
		 .content_List{
		 		display: flex;
		 		flex-wrap: wrap;
		 	}
			.msg-top-liaolist{
				background: #fff;
				.msgtop-list{
					margin:0 30rpx;
					margin-top:30rpx;
				}		
				.msglist_item-list{
					display: flex;
					align-items: center;
					height:130rpx;				
				}				
				.sysimg{
					width:98rpx;
					height:98rpx;			
				}
				.icon-red{
					width:20rpx;
					height:20rpx;
					position: absolute;
					background:red;
					top:22rpx;
					left:84rpx;
					border-radius: 50%;
				}
				.smg-info{
					display: flex;
					align-items: center;
					justify-content: space-between;
					height:130rpx;
					width:578rpx;
					margin-left:16rpx;
					border-bottom: 1px solid #eee;
					padding-bottom:12rpx;
				}
				.smginfotitle{
					font-size: 30rpx;
					font-weight: 500;
					margin-top:24rpx;
				}
				.smgcontent{
					font-size: 24rpx;
					color:#999;
					
					margin-top:8rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.msg-time{
					font-size: 20rpx;
					color:#999;
				}
			}			 
		 .normaltxt{
		 	  text-align: center;
		 		font-size: 28rpx;
		 		color:rgba(153, 153, 153, 1);
				margin-top:60rpx;
		 }
		 //无数据
		 .nodata{
			 margin-top:100rpx;
			 text-align: center;
		 }
		 .noimg{
			 width:256rpx;
			 height:310rpx;
			 margin: 0 auto;
		 }
		 .notext{
			margin-top:40rpx;
			 font-size: 28rpx;
			 color: #999999;
			 line-height: 42rpx;
			 text-align: center;
		 }
	 }
</style>